<template>
	<view class="container">
		<!-- 球队基本信息 -->
		<view class="team-header">
			<image class="team-logo" :src="teamInfo.logo || '/static/images/default-team-logo.png'" mode="aspectFill">
			</image>
			<view class="team-info">
				<view class="team-name">{{ teamInfo.name }}</view>
				<view class="team-meta">
					<text class="team-location">{{ teamInfo.address || '暂无地区' }}</text>
					<text class="team-create-time">创建于 {{ teamInfo.createTime || '--' }}</text>
				</view>
			</view>
		</view>

		<!-- 功能导航 -->
		<view class="nav-grid">
			<view class="nav-item" @tap="goToMembers">
				<image class="nav-icon" src="/static/icons/member.png"></image>
				<text class="nav-value">成员 {{ teamInfo.memberCount || 1 }}</text>
			</view>
			<view class="nav-item" @tap="goToActivities">
				<image class="nav-icon" src="/static/icons/activities.png"></image>
				<text class="nav-value">活动 {{ teamInfo.activityCount || 3 }}</text>
			</view>
			<view class="nav-item" @tap="goToData">
				<image class="nav-icon" src="/static/icons/data.png"></image>
				<text class="nav-value">数据 </text>
			</view>
			<view class="nav-item" @tap="goToFee">
				<image class="nav-icon" src="/static/icons/money.png"></image>
				<text class="nav-value">队费 </text>
			</view>
			<view class="nav-item" @tap="goToCard">
				<image class="nav-icon" src="/static/icons/card.png"></image>
				<text class="nav-value">名片 </text>
			</view>
		</view>

		<!-- 近期活动 -->
		<view class="section">
			<view class="section-header">
				<text class="section-title">近期活动</text>
				<text class="more-link" @tap="goToActivities">查看更多</text>
			</view>
			<view class="activity-list">
				<view class="activity-item" v-for="(activity, index) in activities" :key="index"
					@tap="goToActivityDetail(activity)">
					<view class="activity-info">
						<text class="activity-title">{{ activity.title }}</text>
						<text class="activity-time">{{ activity.activityTime }}</text>
						<text class="activity-location">{{ activity.location }}</text>
					</view>
					<view class="activity-status">
						<text class="signup-count">报名 {{ activity.signupUserCount }}/{{ activity.maxPeople }}</text>
						<text class="status-tag">{{ activity.status }}</text>
					</view>
				</view>
				<view class="empty-tip" v-if="!activities.length">暂无活动</view>
			</view>
		</view>

		<!-- 动态 -->
		<view class="section">
			<view class="section-header">
				<text class="section-title">动态</text>
				<text class="add-btn" @tap="addMoment">+</text>
			</view>
			<view class="moments-grid">
				<view class="moment-item" v-for="(moment, index) in moments" :key="index" @tap="previewMedia(moment)">
					<image v-if="moment.type === 'image'" :src="moment.url" mode="aspectFill"></image>
					<view v-else-if="moment.type === 'video'" class="video-container">
						<image :src="moment.cover" mode="aspectFill"></image>
						<image class="play-icon" src="/static/icons/play.png"></image>
					</view>
				</view>
				<view class="empty-tip" v-if="!moments.length">
					快发布第一条球队动态吧~
					<button class="post-btn" @tap="addMoment">发布动态</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getTeams
	} from '@/api/youqiu/team.js'
	import {
		listActivity
	} from '@/api/youqiu/activity.js'

	export default {
		data() {
			return {
				teamId: '',
				teamInfo: {},
				activities: [],
				moments: []
			}
		},
		onLoad(options) {
			if (options.teamId) {
				this.teamId = options.teamId
				this.getTeamInfo()
			}

			this.getTeamActivityList()
		},
		methods: {
			getTeamActivityList() {
				let _this = this
				let query = {
					teamId: this.teamId
				}
				listActivity(query).then(res => {
					console.log(res.rows)
					_this.activities = res.rows
				})
			},
			getTeamInfo() {
				getTeams(this.teamId).then(res => {
					this.teamInfo = res.data
					// 获取活动和动态列表
					this.getActivities()
					this.getMoments()
				})
			},
			goToMembers() {
				uni.navigateTo({
					url: `/pages/team/members?teamId=${this.teamId}`
				})
			},
			goToActivities() {
				uni.navigateTo({
					url: `/pages/team/activities?teamId=${this.teamId}`
				})
			},
			goToData() {
				uni.navigateTo({
					url: `/pages/team/data?teamId=${this.teamId}`
				})
			},
			goToFee() {
				uni.navigateTo({
					url: `/pages/team/fee?teamId=${this.teamId}`
				})
			},
			goToCard() {
				uni.navigateTo({
					url: `/pages/team/card?teamId=${this.teamId}`
				})
			},
			addMoment() {
				uni.navigateTo({
					url: `/pages/team/post-moment?teamId=${this.teamId}`
				})
			},
			// 添加活动详情跳转方法
			goToActivityDetail(activity) {
				if (!activity.id) {
					uni.showToast({
						title: '活动信息不存在',
						icon: 'none'
					});
					return;
				}
				
				uni.navigateTo({
					url: `/pages/activity/register?id=${activity.id}`,
					fail: (err) => {
						console.error('跳转活动报名页失败:', err);
						uni.showToast({
							title: '页面跳转失败',
							icon: 'none'
						});
					}
				});
			},
			// ... 其他方法
		}
	}
</script>

<style>
	.container {
		min-height: 100vh;
		background-color: #f5f5f5;
		padding-bottom: 30rpx;
	}

	.team-header {
		padding: 40rpx;
		background-color: #646279;
		display: flex;
		align-items: center;
	}

	.team-logo {
		width: 120rpx;
		height: 120rpx;
		border-radius: 60rpx;
		margin-right: 30rpx;
	}

	.team-info {
		flex: 1;
		color: #fff;
	}

	.team-name {
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
	}

	.team-meta {
		font-size: 24rpx;
		opacity: 0.8;
	}

	.nav-grid {
		display: flex;
		background-color: #fff;
		padding: 30rpx 0;
		margin-bottom: 20rpx;
	}

	.nav-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
	}

	.nav-icon {
		width: 32rpx;
		height: 32rpx;
		margin-bottom: 8rpx;
	}

	.nav-value {
		font-size: 24rpx;
		color: #666;
	}

	.nav-item:not(:last-child)::after {
		content: '';
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		height: 50%;
		width: 1rpx;
		background-color: #eee;
	}

	.section {
		background-color: #fff;
		margin-bottom: 20rpx;
		padding: 30rpx;
	}

	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.more-link,
	.add-btn {
		font-size: 28rpx;
		color: #666;
	}

	.activity-item {
		display: flex;
		justify-content: space-between;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #eee;
	}

	.activity-info {
		flex: 1;
	}

	.activity-title {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 8rpx;
		display: block;
	}

	.activity-time,
	.activity-location {
		font-size: 24rpx;
		color: #999;
		margin-right: 20rpx;
	}

	.activity-status {
		text-align: right;
	}

	.signup-count {
		font-size: 24rpx;
		color: #666;
		display: block;
		margin-bottom: 8rpx;
	}

	.status-tag {
		font-size: 24rpx;
		color: #4CAF50;
		background-color: #f0f9f0;
		padding: 4rpx 12rpx;
		border-radius: 4rpx;
	}

	.moments-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 10rpx;
	}

	.moment-item {
		aspect-ratio: 1;
		border-radius: 8rpx;
		overflow: hidden;
	}

	.moment-item image {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.video-container {
		position: relative;
		width: 100%;
		height: 100%;
	}

	.play-icon {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 60rpx;
		height: 60rpx;
	}

	.empty-tip {
		text-align: center;
		color: #999;
		font-size: 28rpx;
		padding: 40rpx 0;
	}

	.post-btn {
		margin-top: 20rpx;
		background-color: #4CAF50;
		color: #fff;
		font-size: 28rpx;
		padding: 10rpx 30rpx;
		border-radius: 30rpx;
		display: inline-block;
	}
</style>